<script setup lang="ts">
import { Col, Row, Image } from "vant";
import { useConfigStore } from "@/stores/models/config";

const configStore = useConfigStore();
</script>
<template>
    <div class="device-info-wrap">
        <Row :gutter="16">
            <Col :span="10">
                <Image width="100%" src="/ESP32_S3_WROOM_1.png" />
            </Col>
            <Col :span="14">
                <div>
                    <div class="decive-info-item">
                        <span>设备名称：</span>
                        <span>{{ configStore.name }}</span>
                    </div>
                    <div class="decive-info-item">
                        <span>软件版本：</span>
                        <span>{{ configStore.version }}</span>
                    </div>
                    <div class="decive-info-item">
                        <span>固件版本：</span>
                        <span>{{ configStore.uname.version }}</span>
                    </div>

                    <div class="decive-info-item">
                        <span>设备IP：</span>
                        <span>{{ configStore.device_ip }}</span>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>
<style scoped lang="less">
.device-info-wrap {
    padding: 1em;
    .decive-info-item {
        display: flex;
        flex-direction: column;
        span:first-child {
            font-size: 1.2em;
            font-weight: 600;
        }
        span:nth-child(2) {
            color: #999;
            font-size: 1em;
            padding: 4px 0;
        }
    }
}
</style>
